<template>
  <div class="head-com-container">
    <span class="icon-bg" :style="{ '--theme': theme }">
      <template v-if="index == '01'">
        <img src="@/assets/images/cycle2.png" alt="" />
      </template>
      <template v-else-if="index == '02'">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
          <path
            fill="currentColor"
            d="M704 192h160v736H160V192h160v64h384v-64zM288 512h448v-64H288v64zm0 256h448v-64H288v64zm96-576V96h256v96H384z"
          ></path>
        </svg>
      </template>
      <template v-else-if="index == '03'">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
          <path
            fill="currentColor"
            d="M416 896V128h192v768H416zm-288 0V448h192v448H128zm576 0V320h192v576H704z"
          ></path>
        </svg>
      </template>
      <template v-else-if="index == '04'">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
          <path
            fill="currentColor"
            d="M704 192h160v736H160V192h160.064v64H704v-64zM311.616 537.28l-45.312 45.248L447.36 763.52l316.8-316.8-45.312-45.184L447.36 673.024 311.616 537.28zM384 192V96h256v96H384z"
          ></path>
        </svg>
      </template>
    </span>

    <div class="index-title">{{ index }}</div>

    <label class="head-title">{{ title }}</label>
    <slot></slot>
  </div>
</template>

<script setup>
  import {
    ref,
    reactive,
    computed,
    toRefs,
    onBeforeMount,
    onMounted,
  } from "vue";

  import useSettingsStore from "@/store/modules/settings";
  const settingsStore = useSettingsStore();
  defineProps({
    title: String,
    icon: String,
    index: String,
  });
  const theme = computed(() => {
    return settingsStore.theme;
  });
</script>
<style lang="scss" scoped>
  .head-com-container {
    display: flex;
    align-items: center;
    padding: 10px 0;
    margin-top: 10px;
    .icon-bg {
      display: inline-flex;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: var(--theme);
      justify-content: center;
      align-items: center;
      color: #fff;
      svg {
        width: 18px;
        height: 18px;
        cursor: pointer;
      }
    }
    .index-title {
      font-size: 22px;
      font-weight: 700;
      margin-left: 0.06rem;
      color: var(--theme);
      position: relative;
      top: 0.03rem;
      margin-right: 0.12rem;
    }
    .head-title {
      font-size: 20px;
    }

    .cus-icon {
      cursor: pointer;
    }
  }
</style>
